<template>
    <div class="doublebar-chart">
		  <chart :options="doueblebardata" ref="doueblebardata" auto-resize/>
    </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/title";
import 'echarts/lib/component/dataZoom'
let echarts1 = require("echarts/lib/echarts");
export default {
  name: 'doubleBarChartTransversal',
  components: {
    chart: Echarts
  },
  props: {
    chartData: Object
  },
  data() {
    return {
      doueblebardata: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '2%',
            right: '10%',
            top: '6%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLine: {//x轴线的样式
    　　　　　　lineStyle: {
    　　　　　　　　type: 'solid',
    　　　　　　　　color: '#ccc',//线的颜色
    　　　　　　　　width:'0'//坐标线的宽度
    　　　　　　}
      　　　 },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#EFF0F6"
              }
            },
            axisLabel:{//字体样式
      　　　　　　show: false,
      　　　　　　textStyle: {
      　　　　　　　　color:'#9B9B9B',
      　　　　　　　　fontWeight : 300 ,
      　　　　　　　　fontSize : 13 //文字的字体大小
      　　　　　　}
      　　　　},
      　　　　axisTick : { //取消刻度线
      　　　　　　show : false
      　　　　}
          },
          yAxis: {
            type: 'category',
            axisLine: {//x轴线的样式
      　　　　　　lineStyle: {
      　　　　　　　　type: 'solid',
      　　　　　　　　color: '#d8d8d8',//线的颜色
      　　　　　　　　width:'1'//坐标线的宽度
      　　　　　　}
      　　　　},
            splitLine: {
                show: false,
                lineStyle: {
                  color: "#EFF0F6"
                }
              },
      　　　　axisLabel:{//字体样式
      　　　　　　show: true,
      　　　　　　textStyle: {
      　　　　　　　　color:'#666',
      　　　　　　　　fontWeight: 200 ,
      　　　　　　　　fontSize : 14 //文字的字体大小
      　　　　　　}
      　　　　},
      　　　　axisTick : { //取消刻度线
      　　　　　　show : false
      　　　　}
          },
          series: [
            {
                name: '发帖',
                type: 'bar',
                barWidth: 10,
                data: [],
                itemStyle: {
                    normal: {
                      color: function(params){
                          return new echarts1.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: "#5FBEDC"},
                            {offset: 1, color: "#045CAA"}
                          ]);
                      },
                      barBorderRadius:[0,10,10,0]
                    }
                }  
            },
            {
                name: '回贴',
                type: 'bar',
                barWidth: 10,
                data: [],
                itemStyle: {
                    normal: {
                      color: function(params){
                          return new echarts1.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: "#F46FC2"},
                            {offset: 1, color: "#FF80B9"}
                          ]);
                      },
                      barBorderRadius:[0,10,10,0]
                    }
                }  
            }
          ]
      }
    };
  },
  created() {},
  methods: {
    setLine() {
      let self = this;
      this.doueblebardata.yAxis.data = [];
      this.doueblebardata.series[0].name = '';
      this.doueblebardata.series[0].data = [];
      this.doueblebardata.series[1].name = '';
      this.doueblebardata.series[1].data = [];

    //   {
    //       "types": ['发帖', '回贴'],
    //       "titles": [],
    //       "data": [
    //           [],
    //           []
    //       ]
    //   }

      this.$nextTick(() => {
          var _types = "types" in this.chartData ? this.chartData.types : ['发帖', '回贴'];
          var _yAxisTile = "titles" in this.chartData ? this.chartData.titles : [];
          var _d1 = "data" in this.chartData ? this.chartData.data[0] : [];
          var _d2 = "data" in this.chartData ? this.chartData.data[1] : [];

          this.doueblebardata.yAxis.data = _yAxisTile;
          this.doueblebardata.series[0].name = _types[0];
          this.doueblebardata.series[0].data = _d1;
          this.doueblebardata.series[1].name = _types[1];
          this.doueblebardata.series[1].data = _d2;
      });
    }
  },
  watch:{
    chartData:{
      handler(newVal){
        this.setLine()
      },
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setLine();
    })
  }
};
</script>

<style lang="scss">
.doublebar-chart {
  height: 100%;
  margin: 0;

  .echarts {
    width: 100%;
    height: 100%;
  }
  .bold {
    font-weight: bold;
    line-height: 18px;
  }
}
</style>
